<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>danceModal演示</title>
	<meta name="author" content="zhaojun" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/danceModal.css" />
</head>
<body>

<div class="container">
	<header>
		<h2>danceModal演示</h2>
	</header>
	<div class="main clearfix">
		<div class="bs-example">
			<h5>各种风格</h5>
			<a class="btn btn-success md-trigger" data-modal="modal-general">普通风格</a>
			<a class="btn btn-success md-trigger" data-modal="modal-tradition">普通风格(按钮底部)</a>
			<a class="btn btn-success md-trigger" data-modal="modal-full">全屏风格</a>
			<a class="btn btn-success md-trigger" data-modal="modal-baiyun">风格1</a>
		</div>
		<div class="bs-example">
			<h5>各种炫酷特效</h5>
			<a class="btn btn-success md-trigger" data-modal="modal-1">淡入和缩放</a>
			<a class="btn btn-success md-trigger" data-modal="modal-2">划入（右侧）</a>
			<a class="btn btn-success md-trigger" data-modal="modal-3">划入（底部）</a>
			<a class="btn btn-success md-trigger" data-modal="modal-4">旋转</a>
			<a class="btn btn-success md-trigger" data-modal="modal-5">坠落</a>
			<a class="btn btn-success md-trigger" data-modal="modal-6">侧翻</a>
			<a class="btn btn-success md-trigger" data-modal="modal-7">顶部</a>
			<a class="btn btn-success md-trigger" data-modal="modal-8">三维翻转 (水平)</a>
			<a class="btn btn-success md-trigger" data-modal="modal-9">三维翻转 (垂直)</a>
			<a class="btn btn-success md-trigger" data-modal="modal-10">3D进入</a>
			<a class="btn btn-success md-trigger" data-modal="modal-11">外围进入</a>
			<a class="btn btn-success md-trigger" data-modal="modal-12">只显示自己</a>
			<a class="btn btn-success md-trigger" data-modal="modal-13">3D夹缝</a>
			<a class="btn btn-success md-trigger" data-modal="modal-14">3D旋转底部</a>
			<a class="btn btn-success md-trigger" data-modal="modal-15">3D旋转左侧</a>
			<a class="btn btn-success md-trigger" data-modal="modal-16">聚焦</a>
			<a class="btn btn-success md-trigger md-setperspective" data-modal="modal-17">让我进去（高级）</a>
			<a class="btn btn-success md-trigger md-setperspective" data-modal="modal-18">让路（高级）</a>
			<a class="btn btn-success md-trigger md-setperspective" data-modal="modal-19">从顶部滑动（高级）</a>
		</div>
		<div class="bs-example">
			<h5>弹出方式</h5>
			<a class="btn btn-success md-trigger" data-modal="modal-1">普通弹出</a>
			<a class="btn btn-success J_openDemo">JS弹出</a>
		</div>
	</div>
</div>

<div class="md-modal md-effect-1" id="modal-general">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-1" id="modal-tradition">
	<div class="md-box">
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<div class="md-bottom">
			<a class="md-close J_md_close" href="javascript:;">关闭</a>
		</div>
	</div>
</div>
<div class="md-modal md-effect-1 md-modal-full" id="modal-full">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-1 md-ext-baiyun" id="modal-baiyun">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div> 
</div>
<div class="md-modal md-effect-1" id="modal-opendemo">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
			<a href="javascript:;" class="J_closeBtn">关闭按钮</a>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div> 
</div>
<div class="md-modal md-effect-1" id="modal-1">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-2" id="modal-2">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-3" id="modal-3">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-4" id="modal-4">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-5" id="modal-5">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-6" id="modal-6">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-7" id="modal-7">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-8" id="modal-8">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-9" id="modal-9">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-10" id="modal-10">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-11" id="modal-11">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-12" id="modal-12">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-13" id="modal-13">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-14" id="modal-14">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-15" id="modal-15">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-16" id="modal-16">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-17" id="modal-17">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-18" id="modal-18">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>
<div class="md-modal md-effect-19" id="modal-19">
	<div class="md-box">
		<div class="md-title">模态框标题</div>
		<div class="md-content">
			<p>这个是内容</p>
		</div>
		<span class="md-setwin"><a class="md-ico md-close md-close1 J_md_close" href="javascript:;"></a></span>
	</div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="js/danceModal.jquery.js"></script>
<script type="text/javascript">
//手动弹出
$('.J_openDemo').click(function(){
	$('#modal-opendemo').openModal();
});

//关闭按钮
$('.J_closeBtn').click(function(){
	$('#modal-opendemo').closeModal();
});
</script>
</body>
</html>